//数据组件
//用户
<template>
    <div>
    <div class="demo-input-size" style="margin-bottom: 20px">
    咨询师：
    <el-input
    style="width:400px;margin-bottom: 5px"
    size="medium"
    placeholder="请输入内容"
    v-model="doctorName">
    </el-input>
    <span style="margin-left: 200px;">
    咨询者：
    </span>
    <el-input
    style="width:400px;margin-bottom: 5px"
    size="medium"
    placeholder="请输入内容"
    v-model="userName">
  </el-input>
  <template>
  <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
  <el-button size="small" style="margin-bottom: 5px;margin-left: 20px;background-color: #BEBEBE" @click="find">检索</el-button>
</div>
    <el-table :data="tableData"
    :header-cell-style="{background:'#3DC5A1',color:'#555'}"
    :border="true">
      <el-table-column prop="appointmentId" label="记录编号" width="250">
      </el-table-column>
      <el-table-column prop="userName" label="咨询者" width="250">
      </el-table-column>
      <el-table-column prop="doctorName" label="咨询师" width="250">
      </el-table-column>
      <el-table-column prop="begTime" label="咨询日期" width="250">
      </el-table-column>
      <el-table-column prop="status" label="申请状态" width="250">
        <template #default="scope">
      <el-tag 
          disable-transitions>
          {{handleItem(scope.row.status)}}
      </el-tag>
      </template>
      </el-table-column>
      <el-table-column prop="operate" label="操作" width="190">
      <template #default="scope">
        <el-popconfirm
          title="确定删除吗？"
          @confirm="del(scope.row.appointmentId)"
          style="margin-left:5px">
          <el-button slot="reference" size="small" table="delete" >删除</el-button>
          </el-popconfirm>
      </template>
                 
      </el-table-column>
      </el-table>
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[7, 10, 12]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    
    </div>
</template>

<script>
export default {
  name: "USer",
  mounted() {
    this.loadPost(); // 确保在组件挂载后加载数据
},
  data() {
      return {
        options: [{
          value: '1',
          label: '未通过'
        }, {
          value: '2',
          label: '通过'
        }, {
          value: '3',
          label: '咨询师申请取消 咨询者未回复'
        }, {
          value: '4',
          label: '咨询者申请取消 咨询师未回复'
        }, {
          value: '5',
          label: '咨询师申请取消 咨询者同意取消'
        },{
          value: '6',
          label: '咨询师申请取消 咨询者不同意取消'
        },{
          value: '7',
          label: '咨询者申请取消 咨询师不同意取消'
        },{
          value: '8',
          label: '咨询者申请取消 咨询师同意取消'
        }],
        tableData:[],
        pageNum:1,
        pageSize:7,
        total:1,
        doctorName:"",
        userName:"",
        value:""
      }
    },
    methods: {
      handleItem(status) {
    switch (status) {
      case 1:
        // 处理逻辑
        return "未通过";
      case 2:
        // 处理逻辑
        return "通过";
      case 3:
        // 处理逻辑
      return "咨询师申请取消 咨询者未回复";
      case 4:
        // 处理逻辑
      return "咨询者申请取消 咨询师未回复";
      case 5:
        // 处理逻辑
      return "咨询师申请取消 咨询者同意取消"
      case 6:
        // 处理逻辑
      return "咨询师申请取消 咨询者不同意取消";
      case 7:
        // 处理逻辑
      return "咨询者申请取消 咨询师不同意取消";
      default:
        // 默认处理逻辑
      return "咨询者申请取消 咨询师同意取消";
    }
  },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageNum=1;
        this.pageSize=val;
        this.loadPost();
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pageNum=val;
        this.loadPost();
      },
        loadGet(){
            this.$axios.get('http://localhost:8082/appointment-info/list').then(res=>res.data).then(res=>{
                console.log(res);
                this.tableData = res;
            })
        },
        loadPost(){
            this.$axios.post('http://localhost:8082/appointment-info/listPage',{
              pageNum:this.pageNum,
              pageSize:this.pageSize,
              total:this.total,
            }).then(res=>res.data).then(res=>{
                console.log(res)
                if (res.code==200){
                    this.tableData = res.data;
                    this.total=res.total;
                }else{
                    alert("获取失败")
                }
            })
        },
        del(appointmentId){
          console.log(appointmentId)
            this.$axios.get('http://localhost:8082/appointment/delete?id='+appointmentId).then(res=>res.data).then(res=>{
                console.log(res)
                if (res.code==200){
                  this.$message({
                  message: '删除成功'
                });
                  this.loadPost()
                }else{
                  this.$message({
                  message: '删除失败'
                });
                }
            })
          },
          find(){
            // console.log(doctorName)
            // console.log(userName)
            // console.log(value)
            // console.log(doctorName,userName,value)
            this.$axios.get('http://localhost:8082/appointment-info/search',{
              params:{
                doctorName:this.doctorName,
                userName:this.userName,
                status:this.value
              }
            }).then(res=>res.data).then(res=>{
                console.log(res)
                if (res.code==200){
                    this.tableData = res.data;
                    console.log(this.tableData)
                }else{
                    alert("获取失败")
                }
            })
          },
    beforeMount() {
        this.loadGet();
    },
  }
}
</script>